<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= __('titLe') %></title>
    <link href="image/favicon.ico" rel="shortcut icon">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_607959_8t0w2txptnj.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="/css/userInfo.css">
    <link rel="stylesheet" href="css/loading.css">
</head>

<body>
    <%- include('base/particles'); %>
    <div class="app">
        <%- include('base/header'); %>
            <div class="login" @keydown="quickLogin">
                <!-- <%- include('base/userInfo'); %> -->
                    <div class="loading" v-show="!loading">
                        <div class="preloader_4">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                    <div class="logIn">
                        <%= __('Thelogin') %>
                    </div>
                    <div class="email">
                        <%= __('EMAIL') %>
                    </div>
                    <input type="text" class="emailnumber" v-model="emailnumber">
                    <div class="email">
                        <%= __('passWORD') %>
                    </div>
                    <input type="password" class="emailnumber" v-model="password">
                    <div class="registered-one">
                        <input type="button" value="<%= __('immediatelyLogin') %>" class="SignUpnow" @click="login()" :disabled="istrue">
                        <a href="/forget" class="Login">
                           <%= __('forgetpassword') %>
                        </a>
                    </div>
            </div>
            <%- include('base/footer'); %>
    </div>
</body>

</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script async src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = new Vue({
        el: '.login',
        data() {
            return {
                emailnumber: "",
                password: '',
                istrue: false,
                maskfalse: false,
                theuser: '',
                information: '',
                loading:false
            };
        },
        created(){
        },
        methods: {
            quickLogin: function(e) {//回车及Enter登录
                if (e.keyCode == 13 || e.keyCode == 108) {
                    this.login();
                }
           },
            getCookie(cookiename) {
            //获取cookie
                var arr,
                    reg = new RegExp("(^| )" + cookiename + "=([^;]*)(;|$)");
                if ((arr = document.cookie.match(reg))) {
                    return unescape(arr[2]);
                } else {
                    return null;
                }
            },
            closeinfo() {
                document.getElementsByClassName('maskLayer')[0].style.display="none"
                document.getElementsByClassName('errorMessage')[0].style.display="none"
                this.theuser = "";
                this.information = ""
                let BODY = document.getElementsByTagName("body")[0]
                BODY.style.overflowY = ""
            },
            login() {//请求登录
                if(document.getElementsByClassName('maskLayer')[0]){
                    var c= document.getElementsByClassName('maskLayer')[0]  //移除元素
                    var d=document.getElementsByClassName('errorMessage')[0] //移除元素
                    document.querySelector('.login').removeChild(c)
                    document.querySelector('.login').removeChild(d)
                    return
                }
                let lang = this.getCookie("lang");
                if (this.emailnumber == "" || this.password == "") {
                    var a=  '<div class="errorMessage"><div class="errorMessageTop" v-html="theuser"></div> <div class="errorMessageBottom" v-html="information"></div><img src="/image/close.png" alt="" class="closeinfo"></div>' 
                    document.querySelector('.login').insertAdjacentHTML('afterBegin',a)
                    var b='<div class="maskLayer"></div>'
                    document.querySelector('.login').insertAdjacentHTML('afterBegin',b)
                    document.getElementsByClassName("closeinfo")[0].onclick=function(){
                        var c= document.getElementsByClassName('maskLayer')[0]  //移除元素
                        var d=document.getElementsByClassName('errorMessage')[0] //移除元素
                        document.querySelector('.login').removeChild(c)
                        document.querySelector('.login').removeChild(d)
                    }
                    if (lang == "en_US") {
                        document.getElementsByClassName('errorMessageTop')[0].innerHTML="Login Failed"
                        document.getElementsByClassName('errorMessageBottom')[0].innerHTML="The account or password cannot be empty."
                    } else if (lang == "zh_TW") {
                        document.getElementsByClassName('errorMessageTop')[0].innerHTML="登錄失敗"
                        document.getElementsByClassName('errorMessageBottom')[0].innerHTML="賬號或密碼不能為空"
                    } else {
                        document.getElementsByClassName('errorMessageTop')[0].innerHTML="登录失败"
                        document.getElementsByClassName('errorMessageBottom')[0].innerHTML="账号或密码不能为空"
                    }
                    this.istrue = false
                    return
                }
                axios.post('/user/eamilcheck',{ email: this.emailnumber }).then(res=>{
                    if(res.data.code == 200){
                        let lang = this.getCookie("lang");
                        var a=  '<div class="errorMessage"><div class="errorMessageTop" v-html="theuser"></div> <div class="errorMessageBottom" v-html="information"></div><img src="/image/close.png" alt="" class="closeinfo"></div>' 
                        document.querySelector('.login').insertAdjacentHTML('afterBegin',a)
                        var b='<div class="maskLayer"></div>'
                        document.querySelector('.login').insertAdjacentHTML('afterBegin',b)
                        document.getElementsByClassName("closeinfo")[0].onclick=function(){
                            var c= document.getElementsByClassName('maskLayer')[0]  //移除元素
                            var d=document.getElementsByClassName('errorMessage')[0] //移除元素
                            document.querySelector('.login').removeChild(c)
                            document.querySelector('.login').removeChild(d)
                        }
                        if (lang == "en_US") {
                            document.getElementsByClassName('errorMessageTop')[0].innerHTML="Login Failed"
                            document.getElementsByClassName('errorMessageBottom')[0].innerHTML="Email does not exist"
                        } else if (lang == "zh_TW") {
                            document.getElementsByClassName('errorMessageTop')[0].innerHTML="登錄失敗"
                            document.getElementsByClassName('errorMessageBottom')[0].innerHTML="郵箱不存在"
                        } else {
                            document.getElementsByClassName('errorMessageTop')[0].innerHTML="登录失败"
                            document.getElementsByClassName('errorMessageBottom')[0].innerHTML="邮箱不存在"
                        }
                        this.istrue = false
                        return
                    }else if(res.data.code == -10002){
                        let params = {
                            email: this.emailnumber,
                            password: this.password
                        }
                        axios.post("/user/signin", params).then(res => {
                            if (res.data.code == 200) {
                                let data = JSON.parse(res.data.data)
                                localStorage.setItem('Email', data.email)
                                localStorage.setItem('user', data.nickname)
                                localStorage.setItem('ID', data.userId)
                                localStorage.setItem('mytoken', data.token)
                                location.href = '/'
                            } else if (res.data.code == -10005) {
                                var a=  '<div class="errorMessage"><div class="errorMessageTop" v-html="theuser"></div> <div class="errorMessageBottom" v-html="information"></div><img src="/image/close.png" alt="" class="closeinfo"></div>' 
                                document.querySelector('.login').insertAdjacentHTML('afterBegin',a)
                                var b='<div class="maskLayer"></div>'
                                document.querySelector('.login').insertAdjacentHTML('afterBegin',b)
                                document.getElementsByClassName("closeinfo")[0].onclick=function(){
                                    var c= document.getElementsByClassName('maskLayer')[0]  //移除元素
                                    var d=document.getElementsByClassName('errorMessage')[0] //移除元素
                                    document.querySelector('.login').removeChild(c)
                                    document.querySelector('.login').removeChild(d)
                                }
                                if (lang == "en_US") {
                                    document.getElementsByClassName('errorMessageTop')[0].innerHTML="Login Failed"
                                    document.getElementsByClassName('errorMessageBottom')[0].innerHTML="The password you entered is incorrect"
                                } else if (lang == "zh_TW") {
                                    document.getElementsByClassName('errorMessageTop')[0].innerHTML="登錄失敗"
                                    document.getElementsByClassName('errorMessageBottom')[0].innerHTML="您輸入的密碼錯誤"
                                } else {
                                    document.getElementsByClassName('errorMessageTop')[0].innerHTML="登录失败"
                                    document.getElementsByClassName('errorMessageBottom')[0].innerHTML="您输入的密码错误"
                                }
                            }
                            this.istrue = false
                        })
                    }
                })
                this.istrue = true
            }
        },
        mounted(){
            this.loading=true
        }
    })
</script>